import React, { useEffect, useState } from 'react'
import Avatar from "@/components/avatar";
import { View, Text } from "@tarojs/components";
import { observer } from "mobx-react";
import userInfo from "@/store/user";
import account from "@/store/account";
import AccountSelecter from '@/components/accountSelecter';
import './index.scss'

const HomeHeader: React.FC<{onChange?: () => void}> = observer(({ onChange }) => {
    const capsuleObj = global.wx.getMenuButtonBoundingClientRect();
    const [showSelecter, setShowSelecter] = useState(false)

    const selecterClose = () => {
        setShowSelecter(false)
        onChange && onChange()
    }
    return <View className="header need-filter flex-column" style={{ height: capsuleObj.height + capsuleObj.top + 'px' }}>
    <View className="flex1"></View>
    <View className="flex-row flex-item">
        <Avatar url={userInfo.info?.avatarUrl} size={capsuleObj.height + 'px'}></Avatar>
        <View className="flex1 display-account-name font-size24 text-main-color" onClick={() => setShowSelecter(true)}>
            <Text>{account.activeAccount?.name}</Text>
            <Text className="iconfont icon-base-down"></Text>
        </View>
    </View>
    <AccountSelecter show={showSelecter} onClose={ selecterClose }></AccountSelecter>
</View>
})

export default HomeHeader